<template>
	<view class="preformance_card" @click="clickPreformanceCard()" >
			<view class="box_title">
				<view class="" v-if="!myInfo.performance_user_name">
					申请时间
				</view>
				<view class="box_center" v-if="!myInfo.performance_user_name">
					{{myInfo.created_at}}
				</view>
				<view class="" v-if="myInfo.performance_user_name">
					申请人
				</view>
				<view class="box_center" v-if="myInfo.performance_user_name">
					{{myInfo.performance_user_name}}
				</view>
				<view class="">
					<text>查看详情</text><image style="width: 32rpx; height: 32rpx;" src="../../static/images/performance/right.png" mode=""></image>
				</view>
			</view>
			<view class="type" v-for="(item,index) in myInfo.details" :key="index">
				<text class="tag" v-if="item.kindId === '0'">
					系统
				</text>
				<text class="tag color" v-else>
					偶发
				</text>
				<text class="text" v-if="item.kindId === '0'">
					{{item.indicator.value}}-{{item.indicator.label}}
				</text>
				<text v-else class="text" >
					{{item.indicatorName || '-'}}
				</text>
			</view>
			<view class="bottom" v-if="myInfo.performance_user_name"> 
				<view class="left">
					申请时间
				</view>
				<view class="">
					{{myInfo.created_at}}
				</view>
			</view>
		<image class="state" v-if="myInfo.performance_statue === '0'" src="@/static/images/meal/stay.svg" mode=""></image>
		<image class="state" v-else-if="myInfo.performance_statue === '1'" src="@/static/images/meal/yes.svg" mode=""></image>
		<image class="state" v-else-if="myInfo.performance_statue === '2'" src="@/static/images/meal/no.svg" mode=""></image>
		<image class="state" v-else-if="myInfo.performance_statue === '4'" src="@/static/images/performance/backTo.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		name: "HouseCard",
		props: {
			myInfo: Object,
		},
		methods:{
			clickPreformanceCard(){
				this.$emit('clickPreformanceCard')
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.preformance_card {
		position: relative;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 10rpx 30rpx 20rpx;
		margin-top: 5px;
	
		.box_title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #E6E6E8;
			.box_center{
				flex: 1;
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #080808;
			}
		}
		.type{
			display: flex;
			// padding: 20rpx 0;
			margin-bottom: 20rpx;
			.tag{
				height: 32rpx;
				box-sizing: border-box;
				line-height: 32rpx;
				padding: 0 10rpx;
				font-size: 24rpx;
				margin-right: 20rpx;
				color: #FFFFFF;
				background-color: #F4BE2D;
				border-radius: 8rpx;
				&.color{
					background-color:#60A5F9 !important;
				}
			}
			.text{
				width: 500rpx;
				font-size: 24rpx;
				color: #000000;
				word-wrap: break-word;
				word-break: break-all;
				overflow: hidden;
			}
		}
		.state {
			position: absolute;
			top: 40rpx;
			right: 24rpx;
			width: 100rpx;
			height: 100rpx;
		}
		.bottom{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #080808;
			.left{
				font-size: 24rpx;
				color: #999999;
				margin-right: 20rpx;
			}
		}
	}
</style>

